<!--
 * @Author: HUAWEI 2532603488@qq.com
 * @Date: 2024-04-26 11:31:21
 * @LastEditors: HUAWEI 2532603488@qq.com
 * @LastEditTime: 2024-05-09 20:27:28
 * @FilePath: \web-mysql-server-master\www\o3_lj.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="js/echarts.min.js"></script>
</head>
<body>
<div id="main1" style="width: 42vw;height: 42vh">
  <script>
    var myChart = echarts.init(document.getElementById("main1"));
    var gender = function(res) {
                        var myChart = echarts.init(document.getElementById("main1"));
                        var option = {
                                color: ['#80FFA5', '#00DDFF'],
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                    type: 'cross',
                                    label: {
                                        backgroundColor: '#6a7985'
                                    }
                                    }
                                },
                                legend: {
                                    data: ['aqi_sj', 'aqi_yc']
                                },
                                toolbox: {
                                    feature: {
                                    saveAsImage: {}
                                    }
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                xAxis: [
                                    {
                                    type: 'category',
                                    boundaryGap: false,
                                    data:res.map(item => item.date)
                                    }
                                ],
                                yAxis: [
                                    {
                                    type: 'value'
                                    }
                                ],
                                series: [
                                    {
                                    name: 'aqi_sj',
                                    type: 'line',
                                    stack: 'Total',
                                    areaStyle: {},
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data:res.map(item => item.aqi_sj)
                                    },
                                    {
                                    name: 'aqi_yc',
                                    type: 'line',
                                    stack: 'Total',
                                    areaStyle: {},
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data:res.map(item => item.aqi_yc)
                                    },
                                ]
                                }; 
                        myChart.setOption(option);
    }    
                    $.ajax({
                        url:'/eval',
                        method:'POST',
                        data:{
                            sql:'select * from ads_yc_all;'
                        },

                        success: gender
                    });
  </script>
</div>
</body>
</html>